<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /*overflow: hidden;*/
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 1000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }



        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <script src="js/animate6.js"></script>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>

        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

    <script>
        // 1. 定义一组数据，存放所有图片的路径
        const images = ['images/laugh01.gif', 'images/laugh02.gif', 'images/laugh03.gif', 'images/laugh04.gif', 'images/laugh05.gif', 'images/laugh43.gif'];

        // 2. 获取到要用的元素
        let box = document.getElementById('box');
        let screen = box.querySelector('.screen');
        let ul = screen.firstElementChild;
        let ol = screen.lastElementChild;
        let arr = document.getElementById('arr');
        let left = document.getElementById('left');
        let right = document.getElementById('right');

        // 3. 动态生成页码
        for (let i = 0; i < images.length; i++) {
            // 创建li放到ol中
            let olLi = document.createElement('li');

            // 放页码
            olLi.innerText = i + 1;

            // 如果是第一个页码：添加一个类名：current
            if (i == 0) {
                olLi.classList.add('current');
            }

            // 加到ol上
            ol.appendChild(olLi);

            // 9. 给li添加点击事件
            olLi.onclick = function () {
                // 原来的页码对应的类current应该被干掉
                olLis[index].classList.remove('current');

                // console.log(i);
                // 9.1 判定当前页码是在被显示图片的左边还是右边
                if (i > index) {
                    // 要看的图片在当前显示的图片的右边：效果应该从右往左滑动
                    // 8.3 拿到当前唯一的li
                    let oldLi = ul.firstElementChild;

                    // 8.4 克隆一个新的li
                    let cloneLi = oldLi.cloneNode(true);

                    // 8.5 修改克隆li中的图片的src：当前被点击的页面对应的图片
                    cloneLi.firstElementChild.src = images[i];

                    // 8.6 将cloneLi放到ul的后面：appendChild()
                    ul.appendChild(cloneLi);

                    // // 8.7 动画，让ul向左移动：一个屏幕的距离
                    animate(ul, -screen.offsetWidth, 'left', function () {
                        // 8.8 干掉旧的li
                        oldLi.remove();

                        // 8.9 干掉旧li，会导致后面的新li往前移动：应该瞬间让ul重新回到原来的位置
                        ul.style.left = '0px';

                        // 重新添加点击事件
                        // right.onclick = rightClick;
                    });
                } else {
                    // 左边
                    // 7.3 需要一个li放到原来li的左边（上边）
                    let oldLi = ul.firstElementChild;

                    // 7.4 克隆：深克隆：元素.cloneNode()
                    let cloneLi = oldLi.cloneNode(true);

                    // 7.5 修改克隆出来的li里面的图片的src：images[i]
                    cloneLi.firstElementChild.src = images[i];

                    // 7.6 放到原来的li的前面：insertBefore(新元素,旧元素)
                    ul.insertBefore(cloneLi, oldLi);

                    // 7.7 ul的偏移默认是0：导致新的li占了当前显示的位置：应该让ul向左偏移 500，隐藏新的li
                    ul.style.left = -screen.offsetWidth + 'px';

                    // // 7.8 ul动画效果：让用户感受到图片是从左边滑出来的
                    animate(ul, 0, 'left', function () {
                        // 7.9 把旧的li要删除：保证最终只有1个li：动画结束后删除
                        oldLi.remove();
                    });
                }

                // 页码发生了改变
                index = i;

                // 给新的index对应的页码加上current类
                olLis[index].classList.add('current');
            }
        }

        // 4. 给box添加鼠标的移入效果：显示箭头
        box.onmouseover = function () {
            arr.style.display = 'block';
        };

        // 5. 给box添加鼠标的移出效果：隐藏箭头
        box.onmouseout = function () {
            arr.style.display = '';
        };

        // 6. 定义一个全局变量：知道当前是第几张图片（默认是第一张）
        let index = 0;

        // 获取ol下的所有的li：for循环之后
        let olLis = ol.children;
        // console.log(olLis);

        // 7. 给左箭头添加点击事件
        left.onclick = leftClick;
        function leftClick() {
            // 释放点击事件
            left.onclick = null;

            // 将index对应的页码的current类干掉
            olLis[index].classList.remove('current');

            // 7.1 左边的1张：要求让index减少1
            index--;

            // 7.2 安全处理：index必须指向数组中图片的下标：不能小于0（出去了）
            if (index < 0) {
                // 指向最后一张
                index = images.length - 1;
            }

            // 7.3 需要一个li放到原来li的左边（上边）
            let oldLi = ul.firstElementChild;

            // 7.4 克隆：深克隆：元素.cloneNode()
            let cloneLi = oldLi.cloneNode(true);

            // 7.5 修改克隆出来的li里面的图片的src：images[index]
            cloneLi.firstElementChild.src = images[index];

            // 7.6 放到原来的li的前面：insertBefore(新元素,旧元素)
            ul.insertBefore(cloneLi, oldLi);

            // 7.7 ul的偏移默认是0：导致新的li占了当前显示的位置：应该让ul向左偏移 500，隐藏新的li
            ul.style.left = -screen.offsetWidth + 'px';

            // // 7.8 ul动画效果：让用户感受到图片是从左边滑出来的
            animate(ul, 0, 'left', function () {
                // 7.9 把旧的li要删除：保证最终只有1个li：动画结束后删除
                oldLi.remove();

                // 重新添加点击事件
                left.onclick = leftClick;
            });

            // 给新的index对应的页码加上current类
            olLis[index].classList.add('current');

        };

        // 8. 右点击事件
        right.onclick = rightClick;

        function rightClick() {
            // 禁用点击：取消点击事件
            right.onclick = null;

            // 将index对应的页码的current类干掉
            olLis[index].classList.remove('current');

            // 8.1 index+1
            index++;

            // 8.2 安全判定：如果超出最后一张，回到第一张
            if (index > images.length - 1) {
                index = 0;
            }

            // 8.3 拿到当前唯一的li
            let oldLi = ul.firstElementChild;

            // 8.4 克隆一个新的li
            let cloneLi = oldLi.cloneNode(true);

            // 8.5 修改克隆li中的图片的src
            cloneLi.firstElementChild.src = images[index];

            // 8.6 将cloneLi放到ul的后面：appendChild()
            ul.appendChild(cloneLi);

            // // 8.7 动画，让ul向左移动：一个屏幕的距离
            animate(ul, -screen.offsetWidth, 'left', function () {
                // 8.8 干掉旧的li
                oldLi.remove();

                // 8.9 干掉旧li，会导致后面的新li往前移动：应该瞬间让ul重新回到原来的位置
                ul.style.left = '0px';

                // 重新添加点击事件
                right.onclick = rightClick;
            });

            // 给新的index对应的页码加上current类
            olLis[index].classList.add('current');
        };
    </script>
</body>

</html>